jQuery 是一个轻量级的 javascript 库, 目前 ( 2019 年 5 月 ) 发布的最新版本为 3.4.1. 它在前端开发中应用广泛, 可以这样说, 有 jQuery 的助力, 你的前端开发将如虎添翼.

本文力争以最简练的语言讲述关于 jQuery 的基本用法, 以帮助初学者快速入门。

笔者假设你已经掌握了HTML，CSS， Javascript 的基本语法，并有一定的实践。若上述假设不成立，那可能需要找点别的资料补补课了: )

​

OK, 废话少说, 我们开始吧…

​

jQuery 能做什么?

先了解一下 jQuery 大概可以做些什么事情. 粗略汇总一下, jQuery 可以完成如下任务:

1) 取得文档中的元素

2) 修改页面的外观

3) 改变文档的内容

4) 响应用户的交互操作

5) 为页面添加动态效果

6) 无需刷新页面从服务器获得信息

7) 简化常见的JavaScript任务

​

起步（ 引入 jQuery ）

下载 jQuery 库, 可到官网下载 , 其中有 2 个版本:

压缩版 ( compressed, jquery-xxx.js ) 和 未压缩版 ( uncompressed, jquery-xxx.min.js )

一般在开发环境使用未压缩版, 以便于调试, 生产环境使用压缩版, 以提高页面加载速度.

​

在HTML文档的<head></head>中写入如下代码, 即可引入 jQuery.

<script type="text/javascript" src="jquery-xxx.js"></script>

上述描述中, xxx 为版本号, 视你下载的 jQuery 版本而定.

<script></script>中的src属性指向 jQuery 文件的相对路径, 根据实际情况作适当修改.

​

解读 $(document).ready(function(){ … });

使用过 javascript 操纵网页中元素的同学都应该知道, 在对此元素进行操纵之前, 首先应确保此元素的 DOM 已经构建完成, 否则对该元素的操作将抛出异常 (空指针).

jQuery 为我们提供了一个很好的机制 (时间点), 可在 DOM 就绪后立即执行指定的代码, 而不必等待图片或其它资源完全加载完成. 这将在一定程度上改善用户体验.

例如如下的代码可在页面的 DOM 构建完成后第一时间弹出一个显示 “Hello world!” 的警告框.

1
2
3
$(document).ready(function() {
  alert('Hello world!');
};

​

jQuery 的工厂函数: $()

在 jQuery 中有一个名字非常特别的函数 $() ( 有时为避免名称冲突, 也可写作 jQuery() ), 此函数称作 jQuery 的工厂函数.

为什么把函数$()称作 “工厂函数” ?

这词来自设计模式中的工厂模式. 建议抽空学习一下 设计模式 ( Disign Pattern )

使用工厂函数$()可完成如下 3 方面的工作:

1. 找到网页中符合指定规则元素, 并将其封装为 jQuery 对象 ( jQuery 对象较普通的 DOM 拥有更多属性和方法 )

通常，在我们操纵网页上的元素之前首先要获得该元素的引用，常规的做法一般使用document.getElementById()获得元素后进行操作. jQuery 为我们提供了更简捷, 但更强大的方式。

Example:

1
2
$('p').text('Hello world');      // 把所有段落的内容替换为 "Hello world"
$('p.ca').text('Hello world');   // 把所有类似 <p class="ca">...</p> 的段落内容替换为 "Hello world"

  • 我们可以在$()函数的参数位置使用CSS选择符形式的字符串来说明欲寻找的元素应符合的条件. jQuery 支持所有的 CSS选择符 语法.

  • text() 方法的用法将在下文中介绍.

也许你已经注意到了，jQuery 的 $() 函数不止选出了所有符合选择条件元素，更把这些元素进行了封装（本文称其为 jQuery 对象），从而增加了更多有用的方法（如上面的 text() 方法）

同时，jQuery 还会将找到的元素封装成一个集合，后续的操作均是针对集合中的每一个元素进行的，例如：对 $('p') 的操作将被应用到所有的段落.

2. 将普通的 DOM 对象封装为 jQuery 对象

Example:

1
2
3
document.getElementById("p1").onclick = function(){
  $(this).text("Hello world");
}

上例中, 我们为 ID 为 “p1” 的那个元素注册了 onclick事件回调函数. 在函数内部, this指向了被点击的那个 元素, 通过 jQuery 工厂函数的封装, $(this)变成了 jQuery 对象, 从而拥有了 text() 方法. ( 若写成this.text("Hello world"); 是会报错的~ )

3. 动态创建网页元素

Example:

1
2
3
var p = $("p");             // 动态创建一个段落元素(<p>)
p.text("Hello world");      
p.appendTo($("body"));      // 将新创建的段落元素添加到 <body></body> 内部, appendTo()方法的用法见下文

​

事件注册：为元素注册事件处理函数

使用工厂函数 $() 找到要操纵的元素后，我们可能想为该元素添加事件处理函数。例如：为页面中所有的段落注册onclick事件处理函数，当用户点击了段落时，弹出消息框，可使用如下的代码：

1
2
3
$('p').bind('click', function(){ 
  alert('Hello world'); 
});

jQuery还为常用的事件注册提供了简写形式，如上面的代码可以简写为：

1
2
3
$('p').click(function(){ 
  alert('Hello world'); 
});

jQuery 中支持简写的事件包括： blur, change, click, dblclick, error, focus, keydown, keypress, keyup, load, mousedown, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload

​

复合事件(函数)

有时候我们可能希望同时捕获鼠标移动到某个元素上方和移开两个事件, 分别进行处理…

例如: 用于实现下拉菜单的显示和隐藏

jQuery 的复合事件正好提供了此项功能，例如:

1
2
3
4
5
6
// 鼠标移到 <p> 上方时弹出"mouse over", 移开则弹出"mouse out"
$('p').hover(function(){
  alert('mouse over');
}, function(){
  alert('mouse out');
});

下面是3个常用的复合事件(函数)：

1) .hover(function(){…}, function(){…});

鼠标指针进入时执行函数1，离开时执行函数2

2) .toggle(speed, function(){…});

若元素可见则隐藏之, 否则令其可见. speed 为显示/隐藏动画的速度, function 为动作完成后的回调函数

这个函数在新旧版本中的作用有差异, 在 jQuery 1.11.1 版本测试是上述效果.

在早期版本中语法为 .toggle(function(){…}, function(){…}), 表示奇数次点击时执行第 1 个函数, 第偶数次点击时执行第 2 个函数

3) .toggleClass( cssClassName );

检查元素是否存在指定名称的CSS类，不存在则添加，存在则移除

​

改变元素的显示效果

本部分将讨论改变页面上元素的显示效果。本文将效果分为2类：（1）操纵CSS；（2）元素的显示与隐藏

操纵 CSS

CSS 的主要功能即时控制元素的外观，若我们可以操纵CSS不就可以控制元素的外观了吗 ?

下面是控制 CSS 的 常用 jQuery 函数:

.css('property', 'value'); // 设置CSS的某个属性值

.css({'property1' : 'value1', 'property2' : 'value2'); // 设置CSS的某些属性值

.addClass( 'CssClassName' ); // 添加一个CSS类

.removeClass( 'CssClassName' ); // 移除一个CSS类

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 所有段落文字变为红色
$('p').css('color', 'red');                 

// 所有段落文字变为红色，加粗
$('p').css({
  'color': 'red', 
  'font-weight' : 'bold'
});

// 假设页面中定义了1个CSS类：.red { color : red; } 

// 所有段落文字变为红色
$('p').addClass('red');											

// 鼠标处于段落之上时文字变红，离开则恢复原来的颜色
// 注意代码中红色的 this 指代当前的段落
$('p').toggle(function(){ 
    $(this).addClass('red'); 
  }, function(){ 
    $(this).removeClass('red'); 
});

​

显示和隐藏元素

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
$('p').hide();					// 把所有段落隐藏
$('p').show();					// 把所有段落显示出来

// 把所有段落隐藏（慢慢地）
// slow (0.6 秒完成）, normal(0.4 秒完成）,fast(0.2 秒完成）,也可使用毫秒数值 
$('p').hide('slow');

// 把所有段落显示出来（ 3秒钟完成 ）
$('p').show(3000);

$('p').fadeOut(1000);		// 淡出
$('p').fadeIn(1000);		// 淡入

快去试试吧, 别傻看了…

​

DOM 操作

下面来看 jQuery 提供的针对 DOM 操作的函数：

1) .attr('property', 'value') // 设置属性值

2) .removeAttr('property') // 删除属性

3) .append() .appendTo() .prepend() .prependTo() // 在元素中插入新元素

4) .after() .insertAfter() .before() .insertBefore()// 在元素相邻位置插入新元素

5) .wrap() .wrapAll() .wrapInner() // 在元素外插入新元素

6) .html() .text() .replaceAll() .replaceWith() // 用新元素或文本替换

7) .empty() // 移除元素中的子元素

8) .remove() // 移除元素及其后代元素，但不实际删除它们

写到这里，原想着不用举例了，但又怕各位看官囫囵吞枣，还是简单举2个例子:

Example:

1
2
3
4
5
6
7
8
9
10
11
// 页面里所有超链接一起指向 CCTV
$('a').attr('href', 'http://www.cctv.com');

// 在所有超链接原文字的后面加上“GOOD”。
// 好好琢磨一下这一句，是不是又学会了点什么?
$('<span>GOOD</span>').appendTo($('a'));

// 清除段落的子元素
$('p').empty();

// 其他的, 自己试试吧...

​

AJAX

AJAX ( Asynchronous JavaScript and XML, 异步 JavaScript 和 XML )是一种客户端与服务器端进行异步通讯的技术，要是不知道是什么东东，下面这段就不用看了，先找点别的资料看看…

1) .load('url') // 加载 url 指向的内容，作为元素的子元素

2) $.getJSON ( 'url', function(data){…} ) // 向URL指定的地址请求JSON格式的数据

3) $.getScript('url') // 向URL指定的地址请求 javascript 脚本，并执行

4) 更为常见的 Ajax 请求方法

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    type       : "post",                // method (post/get)
    url        : "...",                 // 请求数据的地址
    dataType   : 'json',                // 数据格式(json, xml, text …)
    data       : {...},                 // 向服务器端发送的数据           
  
    beforeSend : function(xhr) {},                // 请求前的回调函数
    success    : function(result,status,xhr){},   // 请求成功的回调函数
    error      : function(xhr,status,error) {},   // 出错时的回调函数
    complete   : function(xhr,status) {}          // 请求完成时的回调函数
});

因为要配合服务器端技术，不太好演示，所以就简单举个例吧.

例：假设页面中有一个div, id=”contener”, 如：

<div id="contener"></div>

以下代码可以把 a.html 页面嵌入到该DIV中

$('#contener').load('a.html');

​

好了，本文既然名为 “jQuery入门精要”, 那就到此为止吧。

当然，jQuery 还提供了更多的功能和机制, 希望各位阅读了本文后能初窥门径, 那也算我没有白白折腾了！

若文中所述有失偏颇，敬请指正！